<template>
  <view class="container">
    <!-- 更新时间 -->
    <view class="update-time">
      <uni-icons type="clock" size="14" class="mr-2"></uni-icons>
      <text>更新时间：2025年03月04日 11:00:00</text>
    </view>
    
    <!-- 证件照上传区域 -->
    <view class="form-section">
      <view class="section-title">
        <text class="required">|</text>
        <text>证件照</text>
      </view>
      
      <view class="id-photo-upload">
        <view 
          class="photo-container" 
          @click="chooseImage('idPhoto')"
          v-if="!idPhotoUrl"
        >
          <uni-icons type="plus" size="24" class="add-icon"></uni-icons>
          <text class="upload-text">请上传清晰可见的证件照。</text>
          <text class="upload-hint">图片大小10MB以下，1张</text>
        </view>
        
        <view class="photo-preview" v-if="idPhotoUrl">
          <image :src="idPhotoUrl" mode="widthFix" class="preview-img"></image>
          <view class="delete-btn" @click.stop="deleteImage('idPhoto')">
            <uni-icons type="close" size="18"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 生活照上传区域 -->
    <view class="form-section">
      <view class="section-title">
        <text class="required">|</text>
        <text>生活照</text>
      </view>
      
      <view class="section-desc">
        请上传清晰可见的生活照片，图片大小10MB以下，5张
      </view>
      
      <view class="life-photos-grid">
        <!-- 已上传的生活照 -->
        <view 
          class="photo-item" 
          v-for="(photo, index) in lifePhotoUrls" 
          :key="index"
        >
          <image :src="photo" mode="aspectFill" class="photo-img"></image>
          <view class="delete-btn" @click.stop="deleteLifePhoto(index)">
            <uni-icons type="close" size="18"></uni-icons>
          </view>
        </view>
        
        <!-- 添加生活照按钮 -->
        <view 
          class="add-photo-btn" 
          @click="chooseImage('lifePhoto')"
          v-if="lifePhotoUrls.length < 5"
        >
          <uni-icons type="plus" size="24" class="add-icon"></uni-icons>
        </view>
      </view>
    </view>
    
    <!-- 基本信息区域 -->
    <view class="form-section">
      <view class="section-title">
        <text class="required">|</text>
        <text>基本信息</text>
      </view>
      
      <view class="form-item">
        <text class="label">最高学历：</text>
        <picker 
          class="picker"
          mode="selector"
          :range="educationLevels"
          :value="educationIndex"
          @change="onEducationChange"
        >
          <view class="picker-view">
            {{ educationLevels[educationIndex] || '请选择最高学历' }}
          </view>
        </picker>
      </view>
    </view>
    
    <!-- 学工信息区域 -->
    <view class="form-section">
      <view class="section-title">
        <text class="required">|</text>
        <text>学工信息</text>
      </view>
      
      <view class="form-item">
        <text class="label">校区：</text>
        <picker 
          class="picker"
          mode="selector"
          :range="campuses"
          :value="campusIndex"
          @change="onCampusChange"
        >
          <view class="picker-view">
            {{ campuses[campusIndex] || '请选择校区' }}
          </view>
        </picker>
      </view>
    </view>
    
    <!-- 工作经历区域 -->
    <view class="form-section">
      <view class="section-title with-add">
        <view>
          <text class="required">|</text>
          <text>工作经历</text>
        </view>
        <view class="btn-group">
          <button class="add-btn" @click="addExperience('work')">
            <uni-icons type="plus" size="16" class="mr-1"></uni-icons>新增
          </button>
          <button 
            class="delete-all-btn" 
            @click="toggleDeleteMode('work')"
          >
            删除
          </button>
        </view>
      </view>
      
      <!-- 工作经历列表 -->
      <view class="experience-list">
        <view 
          class="experience-item" 
          v-for="(exp, index) in workExperiences" 
          :key="index"
        >
          <!-- 删除模式下显示红色X -->
          <view 
            v-if="deleteMode === 'work'"
            class="delete-overlay"
            @click.stop="confirmDelete('work', index)"
          >
            <uni-icons type="close" size="30" class="delete-x"></uni-icons>
          </view>
          
          <view class="experience-header">
            <text class="experience-title">工作经历{{ workExperiences.length - index }}</text>
            <view class="experience-actions" v-if="deleteMode !== 'work'">
              <uni-icons 
                type="edit" 
                size="20" 
                class="action-icon"
                @click="editExperience('work', index)"
              ></uni-icons>
            </view>
          </view>
          
          <view class="experience-details">
            <view class="detail-item">
              <text class="detail-label">任职所在单位：</text>
              <text class="detail-value">{{ exp.company }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">任职开始日期：</text>
              <text class="detail-value">{{ exp.startDate }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">任职结束日期：</text>
              <text class="detail-value">{{ exp.endDate || '至今' }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">任职类型：</text>
              <text class="detail-value">{{ exp.type }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">任职内所带学生类别：</text>
              <text class="detail-value">{{ exp.studentType }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">任职内所带学生总数：</text>
              <text class="detail-value">{{ exp.studentCount }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">任职内所带学生年级：</text>
              <text class="detail-value">{{ exp.studentGrades }}</text>
            </view>
          </view>
        </view>
        
        <view class="no-experience" v-if="workExperiences.length === 0">
          暂无工作经历，点击"新增"按钮添加
        </view>
      </view>
    </view>
    
    <!-- 学习经历区域 -->
    <view class="form-section">
      <view class="section-title with-add">
        <view>
          <text class="required">|</text>
          <text>学习经历</text>
        </view>
        <view class="btn-group">
          <button class="add-btn" @click="addExperience('education')">
            <uni-icons type="plus" size="16" class="mr-1"></uni-icons>新增
          </button>
          <button 
            class="delete-all-btn" 
            @click="toggleDeleteMode('education')"
          >
            删除
          </button>
        </view>
      </view>
      
      <!-- 学习经历列表 -->
      <view class="experience-list">
        <view 
          class="experience-item" 
          v-for="(exp, index) in educationExperiences" 
          :key="index"
        >
          <!-- 删除模式下显示红色X -->
          <view 
            v-if="deleteMode === 'education'"
            class="delete-overlay"
            @click.stop="confirmDelete('education', index)"
          >
            <uni-icons type="close" size="30" class="delete-x"></uni-icons>
          </view>
          
          <view class="experience-header">
            <text class="experience-title">学习经历{{ educationExperiences.length - index }}</text>
            <view class="experience-actions" v-if="deleteMode !== 'education'">
              <uni-icons 
                type="edit" 
                size="20" 
                class="action-icon"
                @click="editExperience('education', index)"
              ></uni-icons>
            </view>
          </view>
          
          <view class="experience-details">
            <view class="detail-item">
              <text class="detail-label">学历类型：</text>
              <text class="detail-value">{{ exp.degreeType }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">毕业院校：</text>
              <text class="detail-value">{{ exp.school }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">专业：</text>
              <text class="detail-value">{{ exp.major }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">入学日期：</text>
              <text class="detail-value">{{ exp.startDate }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">毕业日期：</text>
              <text class="detail-value">{{ exp.endDate }}</text>
            </view>
          </view>
        </view>
        
        <view class="no-experience" v-if="educationExperiences.length === 0">
          暂无学习经历，点击"新增"按钮添加
        </view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <button class="cancel-btn" @click="cancelEdit">取消</button>
      <button class="submit-btn" @click="submitForm">提交审核</button>
    </view>
    
    <!-- 经历编辑弹窗 -->
    <uni-popup 
      ref="experiencePopup" 
      type="bottom" 
      :mask-click="false"
      :height="popupHeight"
    >
      <view class="popup-container">
        <view class="popup-header">
          <text class="popup-title">{{ isEditing ? '编辑' : '新增' }}{{ currentExpType === 'work' ? '工作' : '学习' }}经历</text>
          <uni-icons type="close" size="24" class="popup-close" @click="closePopup"></uni-icons>
        </view>
        
        <view class="popup-content">
          <template v-if="currentExpType === 'work'">
            <view class="form-group">
              <text class="form-label">任职所在单位</text>
              <input 
                class="form-input" 
                v-model="currentWorkExp.company" 
                placeholder="请输入任职单位"
              ></input>
            </view>
            
            <view class="form-row">
              <view class="form-group half">
                <text class="form-label">任职开始日期</text>
                <picker 
                  class="form-picker"
                  mode="date"
                  :value="currentWorkExp.startDate"
                  start="1970-01-01"
                  end="2025-12-31"
                  @change="(e) => currentWorkExp.startDate = e.detail.value"
                >
                  <text>{{ currentWorkExp.startDate || '请选择日期' }}</text>
                </picker>
              </view>
              
              <view class="form-group half">
                <text class="form-label">任职结束日期</text>
                <picker 
                  class="form-picker"
                  mode="date"
                  :value="currentWorkExp.endDate"
                  start="1970-01-01"
                  end="2025-12-31"
                  @change="(e) => currentWorkExp.endDate = e.detail.value"
                >
                  <text>{{ currentWorkExp.endDate || '至今' }}</text>
                </picker>
              </view>
            </view>
            
            <view class="form-group">
              <text class="form-label">任职类型</text>
              <picker 
                class="form-picker"
                mode="selector"
                :range="jobTypes"
                :value="currentJobTypeIndex"
                @change="(e) => {
                  currentJobTypeIndex = e.detail.value;
                  currentWorkExp.type = jobTypes[currentJobTypeIndex];
                }"
              >
                <text>{{ currentWorkExp.type || '请选择任职类型' }}</text>
              </picker>
            </view>
            
            <view class="form-group">
              <text class="form-label">所带学生类别</text>
              <picker 
                class="form-picker"
                mode="selector"
                :range="studentTypes"
                :value="currentStudentTypeIndex"
                @change="(e) => {
                  currentStudentTypeIndex = e.detail.value;
                  currentWorkExp.studentType = studentTypes[currentStudentTypeIndex];
                }"
              >
                <text>{{ currentWorkExp.studentType || '请选择学生类别' }}</text>
              </picker>
            </view>
            
            <view class="form-group">
              <text class="form-label">所带学生总数</text>
              <input 
                class="form-input" 
                v-model="currentWorkExp.studentCount" 
                type="number"
                placeholder="请输入学生总数"
              ></input>
            </view>
            
            <view class="form-group">
              <text class="form-label">所带学生年级</text>
              <input 
                class="form-input" 
                v-model="currentWorkExp.studentGrades" 
                placeholder="例如：2020级、2021级"
              ></input>
            </view>
          </template>
          
          <template v-else>
            <view class="form-group">
              <text class="form-label">学历类型</text>
              <picker 
                class="form-picker"
                mode="selector"
                :range="degreeTypes"
                :value="currentDegreeTypeIndex"
                @change="(e) => {
                  currentDegreeTypeIndex = e.detail.value;
                  currentEduExp.degreeType = degreeTypes[currentDegreeTypeIndex];
                }"
              >
                <text>{{ currentEduExp.degreeType || '请选择学历类型' }}</text>
              </picker>
            </view>
            
            <view class="form-group">
              <text class="form-label">毕业院校</text>
              <input 
                class="form-input" 
                v-model="currentEduExp.school" 
                placeholder="请输入毕业院校"
              ></input>
            </view>
            
            <view class="form-group">
              <text class="form-label">专业</text>
              <input 
                class="form-input" 
                v-model="currentEduExp.major" 
                placeholder="请输入专业"
              ></input>
            </view>
            
            <view class="form-row">
              <view class="form-group half">
                <text class="form-label">入学日期</text>
                <picker 
                  class="form-picker"
                  mode="date"
                  :value="currentEduExp.startDate"
                  start="1970-01-01"
                  end="2025-12-31"
                  @change="(e) => currentEduExp.startDate = e.detail.value"
                >
                  <text>{{ currentEduExp.startDate || '请选择日期' }}</text>
                </picker>
              </view>
              
              <view class="form-group half">
                <text class="form-label">毕业日期</text>
                <picker 
                  class="form-picker"
                  mode="date"
                  :value="currentEduExp.endDate"
                  start="1970-01-01"
                  end="2025-12-31"
                  @change="(e) => currentEduExp.endDate = e.detail.value"
                >
                  <text>{{ currentEduExp.endDate || '请选择日期' }}</text>
                </picker>
              </view>
            </view>
          </template>
        </view>
        
        <view class="popup-buttons">
          <button class="popup-cancel" @click="closePopup">取消</button>
          <button class="popup-confirm" @click="saveExperience">保存</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 证件照和生活照
      idPhotoUrl: '',
      lifePhotoUrls: [],
      
      // 基本信息
      educationLevels: ['高中', '专科', '本科', '硕士', '博士'],
      educationIndex: 0,
      
      // 学工信息
      campuses: ['主校区', '东校区', '西校区', '南校区', '北校区'],
      campusIndex: 0,
      
      // 工作经历 - 初始为空
      workExperiences: [],
      
      // 学习经历 - 初始为空
      educationExperiences: [],
      
      // 删除模式状态：null-正常模式，'work'-工作经历删除模式，'education'-学习经历删除模式
      deleteMode: null,
      
      // 弹窗相关
      currentExpType: 'work', // 'work' 或 'education'
      isEditing: false,
      editingIndex: -1,
      popupHeight: '80%',
      
      // 工作经历编辑临时数据
      currentWorkExp: {
        company: '',
        startDate: '',
        endDate: '',
        type: '',
        studentType: '',
        studentCount: '',
        studentGrades: ''
      },
      
      // 学习经历编辑临时数据
      currentEduExp: {
        degreeType: '',
        school: '',
        major: '',
        startDate: '',
        endDate: ''
      },
      
      // 选择器数据
      jobTypes: ['行政干部', '辅导员', '教师', '其他'],
      currentJobTypeIndex: 0,
      studentTypes: ['本科生', '研究生', '博士生', '混合'],
      currentStudentTypeIndex: 0,
      degreeTypes: [
        '全日制普通博士学位研究生',
        '全日制普通硕士学位研究生',
        '全日制普通本科',
        '全日制普通专科',
        '成人教育本科',
        '成人教育专科',
        '其他'
      ],
      currentDegreeTypeIndex: 0
    };
  },
  
  onLoad() {
    // 从本地存储加载数据
    this.loadDataFromStorage();
  },
  
  methods: {
    // 从本地存储加载数据
    loadDataFromStorage() {
      const idPhoto = uni.getStorageSync('idPhotoUrl');
      const lifePhotos = uni.getStorageSync('lifePhotoUrls');
      const educationIndex = uni.getStorageSync('educationIndex');
      const campusIndex = uni.getStorageSync('campusIndex');
      const workExperiences = uni.getStorageSync('workExperiences');
      const educationExperiences = uni.getStorageSync('educationExperiences');
      
      if (idPhoto) this.idPhotoUrl = idPhoto;
      if (lifePhotos && lifePhotos.length) this.lifePhotoUrls = lifePhotos;
      if (educationIndex !== null && educationIndex !== undefined) this.educationIndex = educationIndex;
      if (campusIndex !== null && campusIndex !== undefined) this.campusIndex = campusIndex;
      if (workExperiences && workExperiences.length) this.workExperiences = workExperiences;
      if (educationExperiences && educationExperiences.length) this.educationExperiences = educationExperiences;
    },
    
    // 选择图片
    chooseImage(type) {
      const count = type === 'idPhoto' ? 1 : 5 - this.lifePhotoUrls.length;
      
      uni.chooseImage({
        count,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          
          if (type === 'idPhoto') {
            this.idPhotoUrl = tempFilePaths[0];
            uni.setStorageSync('idPhotoUrl', this.idPhotoUrl);
          } else {
            this.lifePhotoUrls = [...this.lifePhotoUrls, ...tempFilePaths];
            uni.setStorageSync('lifePhotoUrls', this.lifePhotoUrls);
          }
        }
      });
    },
    
    // 删除证件照
    deleteImage(type) {
      if (type === 'idPhoto') {
        this.idPhotoUrl = '';
        uni.removeStorageSync('idPhotoUrl');
      }
    },
    
    // 删除生活照
    deleteLifePhoto(index) {
      this.lifePhotoUrls.splice(index, 1);
      uni.setStorageSync('lifePhotoUrls', this.lifePhotoUrls);
    },
    
    // 学历变化
    onEducationChange(e) {
      this.educationIndex = e.detail.value;
      uni.setStorageSync('educationIndex', this.educationIndex);
    },
    
    // 校区变化
    onCampusChange(e) {
      this.campusIndex = e.detail.value;
      uni.setStorageSync('campusIndex', this.campusIndex);
    },
    
    // 切换删除模式
    toggleDeleteMode(type) {
      // 如果已经是该类型的删除模式，则退出删除模式
      if (this.deleteMode === type) {
        this.deleteMode = null;
      } else {
        // 进入该类型的删除模式
        this.deleteMode = type;
      }
    },
    
    // 确认删除经历
    confirmDelete(type, index) {
      uni.showModal({
        title: '确认删除',
        content: '是否删除该经历？',
        confirmText: '确定',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            this.deleteExperience(type, index);
          }
        }
      });
    },
    
    // 添加经历
    addExperience(type) {
      // 退出删除模式
      this.deleteMode = null;
      
      this.currentExpType = type;
      this.isEditing = false;
      this.editingIndex = -1;
      
      // 重置表单数据
      if (type === 'work') {
        this.currentWorkExp = {
          company: '',
          startDate: '',
          endDate: '',
          type: '',
          studentType: '',
          studentCount: '',
          studentGrades: ''
        };
        this.currentJobTypeIndex = 0;
        this.currentStudentTypeIndex = 0;
      } else {
        this.currentEduExp = {
          degreeType: '',
          school: '',
          major: '',
          startDate: '',
          endDate: ''
        };
        this.currentDegreeTypeIndex = 0;
      }
      
      // 显示弹窗
      this.$refs.experiencePopup.open();
    },
    
    // 编辑经历
    editExperience(type, index) {
      // 退出删除模式
      this.deleteMode = null;
      
      this.currentExpType = type;
      this.isEditing = true;
      this.editingIndex = index;
      
      // 填充完整表单数据
      if (type === 'work') {
        const exp = this.workExperiences[index];
        this.currentWorkExp = JSON.parse(JSON.stringify(exp));
        this.currentJobTypeIndex = this.jobTypes.indexOf(exp.type) || 0;
        this.currentStudentTypeIndex = this.studentTypes.indexOf(exp.studentType) || 0;
      } else {
        const exp = this.educationExperiences[index];
        this.currentEduExp = JSON.parse(JSON.stringify(exp));
        this.currentDegreeTypeIndex = this.degreeTypes.indexOf(exp.degreeType) || 0;
      }
      
      // 显示弹窗
      this.$refs.experiencePopup.open();
    },
    
    // 删除单条经历
    deleteExperience(type, index) {
      if (type === 'work') {
        this.workExperiences.splice(index, 1);
      } else {
        this.educationExperiences.splice(index, 1);
      }
      
      // 保存到本地存储
      this.saveExperiencesToStorage();
    },
    
    // 保存经历
    saveExperience() {
      if (this.currentExpType === 'work') {
        // 验证工作经历必填项
        if (!this.currentWorkExp.company) {
          return this.showError('请输入任职单位');
        }
        if (!this.currentWorkExp.startDate) {
          return this.showError('请选择任职开始日期');
        }
        if (!this.currentWorkExp.type) {
          return this.showError('请选择任职类型');
        }
        if (!this.currentWorkExp.studentType) {
          return this.showError('请选择学生类别');
        }
        
        // 保存工作经历
        if (this.isEditing) {
          this.workExperiences[this.editingIndex] = this.currentWorkExp;
        } else {
          this.workExperiences.unshift(this.currentWorkExp);
        }
      } else {
        // 验证学习经历必填项
        if (!this.currentEduExp.degreeType) {
          return this.showError('请选择学历类型');
        }
        if (!this.currentEduExp.school) {
          return this.showError('请输入毕业院校');
        }
        if (!this.currentEduExp.major) {
          return this.showError('请输入专业');
        }
        if (!this.currentEduExp.startDate) {
          return this.showError('请选择入学日期');
        }
        if (!this.currentEduExp.endDate) {
          return this.showError('请选择毕业日期');
        }
        
        // 保存学习经历
        if (this.isEditing) {
          this.educationExperiences[this.editingIndex] = this.currentEduExp;
        } else {
          this.educationExperiences.unshift(this.currentEduExp);
        }
      }
      
      // 保存到本地存储
      this.saveExperiencesToStorage();
      
      // 关闭弹窗
      this.closePopup();
      
      // 显示成功提示
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      });
    },
    
    // 保存经历到本地存储
    saveExperiencesToStorage() {
      uni.setStorageSync('workExperiences', this.workExperiences);
      uni.setStorageSync('educationExperiences', this.educationExperiences);
    },
    
    // 显示错误提示
    showError(message) {
      uni.showToast({
        title: message,
        icon: 'none'
      });
      return false;
    },
    
    // 关闭弹窗
    closePopup() {
      this.$refs.experiencePopup.close();
    },
    
    // 返回上一页
    navigateBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    
    // 取消编辑
    cancelEdit() {
      uni.showModal({
        title: '提示',
        content: '确定要取消编辑吗？未保存的内容将丢失',
        success: (res) => {
          if (res.confirm) {
            this.navigateBack();
          }
        }
      });
    },
    
    // 提交表单
    submitForm() {
      // 验证必填项
      if (!this.idPhotoUrl) {
        return this.showError('请上传证件照');
      }
      
      if (this.workExperiences.length === 0) {
        return this.showError('请至少添加一条工作经历');
      }
      
      if (this.educationExperiences.length === 0) {
        return this.showError('请至少添加一条学习经历');
      }
      
      // 提交表单数据
      uni.showLoading({
        title: '提交中...'
      });
      
      // 模拟接口请求
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '提交审核成功',
          icon: 'success'
        });
        
        // 提交成功后返回上一页
        setTimeout(() => {
          this.navigateBack();
        }, 1500);
      }, 1500);
    }
  }
};
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 100rpx;
}

/* 导航栏样式 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.back-btn {
  width: 60rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  font-weight: 500;
}

.right-icons {
  display: flex;
  align-items: center;
}

.mr-4 {
  margin-right: 20rpx;
}

/* 更新时间样式 */
.update-time {
  background-color: #fff8e6;
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: #ff7d00;
  display: flex;
  align-items: center;
}

/* 表单区块样式 */
.form-section {
  background-color: #fff;
  margin-top: 20rpx;
  padding: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
}

.section-title.with-add {
  justify-content: space-between;
  align-items: center;
}

.required {
  color: #ff3b30;
  margin-right: 10rpx;
}

.section-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
}

/* 按钮组样式 */
.btn-group {
  display: flex;
  align-items: center;
}

.add-btn {
  background-color: #ff3b30;
  color: #fff;
  font-size: 26rpx;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  margin-left: 10rpx;
}

.delete-all-btn {
  background-color: #ff3b30;
  color: #fff;
  font-size: 26rpx;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  margin-left: 10rpx;
}

.mr-1 {
  margin-right: 8rpx;
}

/* 表单项目样式 */
.form-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.form-item:last-child {
  border-bottom: none;
}

.label {
  font-size: 28rpx;
  color: #333;
  width: 200rpx;
}

.picker {
  flex: 1;
}

.picker-view {
  font-size: 28rpx;
  color: #333;
  text-align: right;
  padding-right: 10rpx;
}

/* 证件照上传样式 */
.id-photo-upload {
  border: 1px dashed #ccc;
  border-radius: 8rpx;
  padding: 40rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.photo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.add-icon {
  color: #ff3b30;
  margin-bottom: 20rpx;
}

.upload-text {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.upload-hint {
  font-size: 24rpx;
  color: #999;
}

.photo-preview {
  width: 100%;
  max-width: 400rpx; /* 限制最大宽度 */
  margin: 0 auto; /* 居中显示 */
  position: relative;
  border-radius: 8rpx;
  overflow: hidden;
  border: 1px solid #eee; /* 添加边框区分预览区域 */
}

.preview-img {
  width: 100%;
  height: auto;
  min-height: 300rpx; /* 确保有足够高度显示 */
  object-fit: contain; /* 保持图片比例，完整显示 */
}

/* 生活照上传样式 */
.life-photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.photo-item {
  width: 100%;
  padding-top: 100%; /* 1:1 比例 */
  position: relative;
  border-radius: 8rpx;
  overflow: hidden;
}

.photo-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.add-photo-btn {
  width: 100%;
  padding-top: 100%; /* 1:1 比例 */
  border: 1px dashed #ccc;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 删除按钮样式 */
.delete-btn {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(255, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 10;
}

/* 经历列表样式 */
.experience-list {
  margin-top: 20rpx;
}

.experience-item {
  background-color: #f9f9f9;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  position: relative;
}

/* 删除模式下的覆盖层和X图标 */
.delete-overlay {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  width: 50rpx;
  height: 50rpx;
  background-color: rgba(255, 0, 0, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.delete-x {
  color: white;
}

.experience-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
  padding-bottom: 15rpx;
  border-bottom: 1px solid #eee;
}

.experience-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
}

.experience-actions {
  display: flex;
}

.action-icon {
  margin-left: 20rpx;
  color: #666;
}

.delete-icon {
  color: #ff3b30;
}

.experience-details {
  margin-top: 15rpx;
}

.detail-item {
  display: flex;
  margin-bottom: 15rpx;
  font-size: 26rpx;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-label {
  color: #666;
  width: 240rpx;
}

.detail-value {
  flex: 1;
  color: #333;
}

.no-experience {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
  font-size: 28rpx;
  background-color: #f9f9f9;
  border-radius: 8rpx;
}

/* 底部按钮样式 */
.bottom-buttons {
  display: flex;
  padding: 20rpx 30rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.cancel-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 40rpx;
  background-color: #fff;
  color: #333;
  font-size: 32rpx;
  margin-right: 20rpx;
}

.submit-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  background-color: #d91e18;
  color: #fff;
  font-size: 32rpx;
  border: none;
}

/* 弹窗样式 */
.popup-container {
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 30rpx;
  border-bottom: 1px solid #eee;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 500;
}

.popup-close {
  color: #666;
}

.popup-content {
  padding: 30rpx;
  max-height: calc(80% - 180rpx);
  overflow-y: auto;
}

.form-group {
  margin-bottom: 30rpx;
}

.form-row {
  display: flex;
  justify-content: space-between;
}

.half {
  width: calc(50% - 10rpx);
}

.form-label {
  display: block;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.form-input {
  width: 100%;
  height: 70rpx;
  line-height: 70rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 26rpx;
}

.form-picker {
  width: 100%;
  height: 70rpx;
  line-height: 70rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 26rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-picker::after {
  content: "";
  width: 12rpx;
  height: 12rpx;
  border-top: 2rpx solid #666;
  border-right: 2rpx solid #666;
  transform: rotate(45deg);
}

.popup-buttons {
  display: flex;
  padding: 20rpx 30rpx;
  border-top: 1px solid #eee;
}

.popup-cancel {
  flex: 1;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 8rpx;
  background-color: #fff;
  color: #333;
  font-size: 28rpx;
  margin-right: 20rpx;
}

.popup-confirm {
  flex: 1;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  border-radius: 8rpx;
  background-color: #d91e18;
  color: #fff;
  font-size: 28rpx;
  border: none;
}
</style>